<script setup>
import { onMounted, ref, reactive } from "vue";
import { taskInfo, uploadShp, deleteAll, exportShp, daownLoadData } from '@/api/global'
import { ElMessage } from "element-plus";
import { sessionStorage } from "@/utils/storage";
import leafletVue from '@/components/leaflet/index.vue'
import handlePage from './handlePage.vue'


let name = ref('')
let showPage = ref(false)
let obj = reactive({
  serverData: {},
  fileList: []
})
const uploadEle = ref(null)

onMounted(() => {
  name.value = sessionStorage.get('uid') || ''
  if (name.value) {
    obj.fileList.push({
      name: name.value,
      url: ''
    })
  }
})

const uploadData = () => {
  uploadEle.value.clearFiles();
  showPage.value = false
}

const beforeUpload = async (file) => {
  obj.fileList = []
  let formData = new FormData();
  formData.append("file", file);
  formData.append('tableName', file.uid)
  name.value = file.uid
  sessionStorage.set('uid', name.value)
  const res = await uploadShp(formData)

  obj.fileList.push({
    name: name.value,
    url: ''
  })
  return false;
}

//查看服务加载成功
async function seeServer () {
  const res = await taskInfo({
    taskId: name.value,
    type: 'publish'
  })
  if (res.status === 'OK') {
    if (res.data.status === 'success') {
      obj.serverData = res.data
      showPage.value = true
    } else {
      ElMessage({
        type: "warning",
        message: "服务还未发布成功，请稍后！",
      });
    }
  }
}

//数据导出任务
async function dataExport () {
  if (name.value) {
    const res = await exportShp(name.value)
    if (res.status === 'OK') {
      ElMessage({
        type: "success",
        message: "创建导出数据任务成功，稍后可以下载。",
      });
    }
  } else {
    ElMessage({
      type: "warning",
      message: "请先上传shp数据！",
    });
  }
}

// 数据下载
async function download () {
  if (name.value) {
    const res = await taskInfo({
      taskId: name.value,
      type: 'export'
    })
    if (res.status === 'OK' && res.data.status === 'success') {

      window.location.href = `${window.BaseUrl}/fea-edit/download/${name.value}`
      ElMessage({
        type: "success",
        message: "开始下载",
      });
    }
  } else {
    ElMessage({
      type: "warning",
      message: "请先上传shp数据并且创建导出任务！",
    });
  }
}

async function clearAll () {
  const res = await deleteAll({
    tableName: name.value
  })
  if (res.status === 'OK') {
    ElMessage({
      type: "success",
      message: "清空完成",
    });
  }
}

</script>

<template>
  <div class="layer-edit">
    <leaflet-vue id="leaflet-map"></leaflet-vue>
    <div class="edit-page">
      <el-upload class="upload-demo" ref="uploadEle" v-model:file-list="obj.fileList" action="" multiple :before-upload="beforeUpload">
        <el-button type="primary" @click="uploadData">上传</el-button>
        <template>
          <div class="el-upload__tip">
            请上传shp
          </div>
        </template>
      </el-upload>
      <el-button @click="seeServer" type="primary">加载服务</el-button>
      <el-button @click="clearAll" type="primary">清空</el-button>
      <el-button @click="dataExport" type="primary">数据导出</el-button>
      <el-button @click="download" type="primary">下载</el-button>
    </div>
    <handle-page v-if="showPage" class="handle-page" :serverData="obj.serverData" />
  </div>
</template>

<style lang='less'>
.layer-edit {
  position: relative;
  height: 100%;
  width: 100%;
  .edit-page {
    position: absolute;
    top: 30px;
    left: 50px;
    z-index: 5;
    .upload-demo {
      margin-bottom: 20px;
    }
  }
  .handle-page {
    position: absolute;
    top: 180px;
    left: 50px;
    z-index: 5;
  }
}
</style>